<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>相对单位</title>
        <style type="text/css">
            :root {
                /* root font size */
                font-size: 10px;
            }

            .outer {
                border: 1px solid blue;
                /* 1.5em 表示父元素字高的 1.5倍，即 1.5 * 20 = 30 */
                font-size: 1.5em;
                /* 2em 表示相对于当前元素中字高的 2倍，即 2 * 30 = 60 */
                line-height: 2em;
            }

            .inner {
                /* 1.5em 表示父元素字高的 1.5倍，即 1.5 * 30 = 45 */
                font-size: 1.5em;
                /* 2em 表示相对于当前元素中字高的 2倍，即 2 * 45 = 90 */
                line-height: 2em;
            }

            .last {
                /* 1.5rem 表示 根元素字高的 1.5倍，即 1.5 * 20 = 30 */
                font-size: 1.5rem;
                /* 2rem 表示 根元素字高的 2倍，即 2 * 20 = 40 */
                line-height: 2rem;
            }
        </style>
    </head>
    <body>

        <div class="outer">
            <div>亭亭玉立</div>
            <div class="inner">玉树临风</div>
            <div class="last">风流倜傥</div>
        </div>

    </body>
</html>